<template>
	<view>
		<u-popup :show="show" @close="close" closeable round='20' @open="open" :safeAreaInsetBottom="false">
			<view :style="{maxHeight: height+'rpx'}" class="popupPicker">
				<view style="height: 100rpx;" class="fr-ac-jc fs-32">{{title}}</view>
				<scroll-view scroll-y="true" :style="{height:height-250+'rpx'}">
					<view :style="{'grid-template-columns':`repeat(${column},1fr)`}"
						style="display: grid;grid-gap: 30rpx;">
						<view v-for="(item,ind) in pickerList" :key="ind" class="fr-ac-jsb popupList"
							:class="item.isTrue?'popupListActive':''" @click="toCheckbox(item)">
							<view>{{item[list.keyName]}}</view>
							<up-icon :name="item.isTrue?'yuanxingxuanzhongfill':'yuanxingweixuanzhong'"
								customPrefix="custom-icon" size="35rpx" :color="item.isTrue?'var(--color)':''"></up-icon>
						</view>
					</view>
				</scroll-view>
				<view class="fr-ac-jsb" style="height: 150rpx;">
					<view class="popupButton fc-ac-jc" @click="left">{{leftButton}}</view>
					<view class="popupButton fc-ac-jc" @click="right">{{rightButton}}</view>
				</view>
				<view style="height:35px"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			//是否显示
			show: {
				default: false,
				type: Boolean
			},
			//弹窗默认高度
			height: {
				default: 800,
				type: [Number, String]
			},
			//选择器标题
			title: {
				default: "切换档案",
				type: String
			},
			//数据
			list: {
				default: {},
				type: Object
			},
			//左右按钮
			leftButton: {
				default: "取消",
				type: String
			},
			rightButton: {
				default: "确定",
				type: String
			},
			//默认值
			defaultValue: {
				default: [],
				type: [Array, String, Number]
			},
			column: {
				default: 1
			},

		},
		data() {
			return {
				pickerList: [],
			};
		},
		methods: {
			open() {
				let backFill = []
				if (Array.isArray(this.defaultValue)) {
					backFill = this.defaultValue
				} else {
					backFill = this.defaultValue.toString().split(',')
				}
				this.pickerList = this.list.list || [];
				// 如果之前选择器没被选过，则使用默认值
				if (!this.pickerList.find(e => e.isTrue == true)) {
					backFill.length && this.pickerList.forEach(item => {
						if (backFill.findIndex(e2 => e2 == item[this.list.checkName]) != -1) {
							item.isTrue = true
						}
					})
				}
			},
			close() {
				this.$emit('close')
			},
			left() {
				let list = this.list.list
				let arr = list.filter(item => item.isTrue == true)
				let arr1 = arr.map(item => item[this.list.checkName])
				this.$emit('left', arr1)
			},
			right() {
				let list = this.list.list
				let arr = list.filter(item => item.isTrue == true)
				let arr1 = arr.map(item => item[this.list.checkName])
				this.$emit('right', arr1)
			},
			toCheckbox(val) {
				if (val.isTrue == true) {
					val.isTrue = false
					console.log('取消')
				} else {
					let list = this.list.list
					let arr = list.filter(item => item.isTrue == true)
					if (this.list.num == 0) {
						val.isTrue = true
					} else {
						if (this.list.num == 1) {
							list.forEach(item => item.isTrue = false)
							val.isTrue = true
						} else if (arr.length < this.list.num) {
							val.isTrue = true
							this.$emit('selectClick', val)
						} else {
							uni.$u.toast(`超过${this.list.num}个了`)
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.popupPicker {
		border-radius: 20px 20px 0 0;
		padding: 0 60rpx;
		background: #113441;
	}

	.popupList {
		box-sizing: border-box;
		padding: 25rpx 30rpx;
		border: 1px solid #999;
		border-radius: 8rpx;
	}

	.popupListActive {
		border: 1px solid var(--color);
		color: var(--color);
	}

	.popupButton {
		width: 40%;
		padding: 20rpx 0;
		border-radius: 60rpx;
		border: 1px solid #999;

		&:last-child {
			background: var(--color);
			color: #fff;
			border: 1px solid var(--color);
		}
	}
</style>